<template>
    <div class="answer" v-show="isShow">
        <div class="answer-body weui_dialog">
            <div class="start" v-if="state=='start'">
                <div class="con">
                    <div class="process">
                        <svg class="svg" width="50" height="50" viewbox="0 0 440 440">
                            <circle cx="220" cy="220" r="200" stroke-width="50" stroke="#ffffff" fill="none"></circle>
                            <circle stroke-dasharray="{{process}}" cx="220" cy="220" r="200" stroke-width="50" stroke="#9cb352" fill="none" transform="rotate(-90 220 220)"></circle>
                        </svg>
                        <div class="text">{{index}}</div>
                    </div>
                    <div class="head">
                        <div class="text">
                            {{question.title}}
                        </div>
                    </div>
                    <div class="main">
                        <div class="ans-a" :class="{'right':rightA}">
                            {{question.pressA}}
                        </div>
                        <div class="ans-b" :class="{'right':rightB}">
                            {{question.pressB}}
                        </div>
                    </div>
                </div>
                <div class="btn">
                    <div class="item" :class="{'on':pressA}" @click="press_click('pressA')" @touchstart="press_start('pressA')" @touchend="press_end('pressA')"></div>
                    <div class="item" :class="{'on':pressB}" @click="press_click('pressB')" @touchstart="press_start('pressB')" @touchend="press_end('pressB')"></div>
                </div>
            </div>
            <div class="success" v-if="state=='success'">
                <div class="weui_dialog_hd">恭喜你获得通关奖励</div>
                <div class="weui_dialog_bd"><span>奖券 x{{reward}}</span></div>
                <div class="weui_dialog_ft">
                    <a href="#lucky" class="weui_btn_dialog">去抽奖</a>
                </div>
            </div>
            <div class="fail" v-if="state=='fail'">
                <div class="weui_dialog_hd">很可惜 只差一点点</div>
                <div class="weui_dialog_bd"></div>
                <div class="des">偷偷告诉你，答案就在游戏简介中</div>
                <div class="weui_dialog_ft">
                    <a href="javascript:;" class="weui_btn_dialog" @click="restart">重新开始</a>
                    <a href="javascript:;" class="weui_btn_dialog" @click="close">关闭找答案</a>
                </div>
            </div>
        </div>
        <div class="weui_mask"></div>
    </div>
</template>
<script type="text/ecmascript-6">
    import shuffle from 'lodash.shuffle'
    import '../style/answer.less'
    import server from '../../lib/server'
    import {setSession,getSession} from '../../lib/session'
    import Mask from '../../weui/Mask.vue'
    export default{
        props:{
            id:{
                required:true
            },
            qst:{
                type:Array,
                required:false,
                twoWay:true,
                default:[]
            },
            isShow:{
                type:Boolean,
                required:false,
                twoWay:true,
                default:false
            }
        },
        ready(){
            this.$watch('isShow',(val)=>{
              this.getQuestion();
              if(val){
                this.restart();
              }
            });
        },
        data(){
            return {
                index:1,
                pressA:false,
                pressB:false,
                state:'fail',//fail success
                right:0,
                question:{},
                serverData:getSession(),
                reward:0
            }
        },
        computed:{
            rightA(){
                return this.right==1;
            },
            rightB(){
                return this.right==2;
            },
            process(){
                this.getQuestion();
                var perimeter = Math.PI * 2 * 200,percent=(this.index-1)/3;
                return perimeter*percent+' '+perimeter*(1-percent);
            }
        },
        methods:{
            press_start(type){
                this[type]=true;
            },
            press_end(type){
                this[type]=false;
            },
            successCallback(){
            },
            getQuestion(){
                var data=this.qst[this.index-1],question={};
                question.title=data.q;
                if(Math.random()>0.5){
                    question.pressA=data.c;
                    question.pressB=data.w;
                    question.right='pressA';
                }else{
                    question.pressA=data.w;
                    question.pressB=data.c;
                    question.right='pressB';
                }
                this.question=question;
            },
            press_click(type){
                if(type==this.question.right){
                    if(type=='pressA'){
                        this.right=1;
                    }else{
                        this.right=2;
                    }
                    setTimeout(()=>{
                        this.right=0;
                        if(this.index<3){
                            this.index+=1;
                        }else{
                            server('/P/U/appanswer_wx',{
                                rid:this.id,
                                session_id:this.serverData.session_id
                            }).success((response)=>{
                                if(response.code==1){
                                    this.state='success';
                                    this.reward=response.data;
                                    this.serverData.ticketNum+=this.reward;
                                    this.serverData.ticketTotal+=this.reward;
                                    this.serverData.chance-=1;
                                    setSession(this.serverData);
                                }else{
                                    if(response.code==19){
                                        this.$parent.errorData={
                                            show:true,
                                            type:'login'
                                        };
                                    }else{
                                        this.$parent.errorData={
                                            show:true,
                                            type:'error',
                                            msg:response.msg
                                        };
                                    }
                                }
                            });
                        }
                    },300);
                }else{
                    this.state='fail';
                }
            },
            restart(){
                if(this.serverData.chance>0){
                    this.qst=shuffle(this.qst);
                    this.answer=true;
                    setSession(this.serverData);
                    this.state='start';
                    this.right=0;
                    this.index=1;
                }else{
                    this.isShow=false;
                    this.$parent.errorData={
                        show:true,
                        type:'error',
                        msg:'今天没有机会了，明天再来吧'
                    };
                }
            },
            close(){
                this.isShow=false;
            }
        }
    }
</script>